<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:auto;
        }
        .div1{
            width: 80%;
            height:80px;
            background-color:rgb(251, 250, 248);
            margin:auto;
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        .img1{
            margin-left:20px;
            margin-top: 10px;
        }
        .li1{
            float: left;
            list-style-type: none;
            margin-left: 100px;   
        }
        .ul1{
            margin-left:200px;
        }
        .div2{
            width:80%;
            height: 30px;
            background-color: blue;
            margin-left:187px;
            margin-bottom: 5px;
        }
        .a1{
            text-decoration: none;
            color: azure;
        }
        .div3{
            width:80% ;
            background-color:rgb(251, 250, 248);
            margin-left:187px;
            margin-bottom: 5px;
        }
        .img2{
            margin-left:100px;
        }
        .div4{
            width:80% ;
            background-color:rgb(251, 250, 248);
            margin-left:187px;
            margin-bottom: 5px;
            height: 300px;
        }
        .div5,.div6{
            float: left;
        }
        .div5{
          width:700px;
          height:300px;
          background-color:rgb(248, 247, 246);
          margin-left:100px;
        }
        .img3{
            width:150px;
            height:150px;
            margin-left:10px;
        }
        .li2{
            list-style-type: none;
            background:url("img2\icon1.jpg") no-repeat left center;
            margin-left: 20px;
            margin-top: 30px;
        
        }
        .span1{
            float: right;
            color: rgb(178, 183, 189);
            margin-right:15px;
        }
        .a2{
            text-decoration: none;
            color: black;
        }
        .div7{
            width:80% ;
            height:200px;
            background-color:rgb(251, 250, 248);
            margin-left:187px;
            margin-bottom: 5px;
        }
        .h4{
            margin-left:100px;
        }
        .img4{
            width:200px;
            height:150px;
            margin-left:100px;
            float: left;
        }
        .div6{
            margin-left:100px;
        }
        .p1{
            line-height:3;
            text-indent:2em;
        }
        .div8{
            width:80%;
            background-color:rgb(251, 250, 248);
            margin-left:187px;
            height:120px;
        }
        .div9{
            width:1000px;
            margin-left:300px;
        }
        .div10{
            margin-top:40px;
            width:150px;
            float: left;
            height:20px;
            text-align: center;
            border-right:1px solid black;;
            margin-bottom:10px;
        }
        .p2{
            text-align: center;
            clear: both;
        }
        .div11{
            float: left;
        }
        .span4{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1"><img  class="img1" src="img2\logo.png">
    </div>
    <div class="div2">
        <ul class="ul1">
            <li class="li1"><a href="#" class="a1">首页</a></li>
            <li class="li1"><a href="#" class="a1">公司简介</a></li>
            <li class="li1"><a href="#" class="a1">产品中心</a></li>
            <li class="li1"><a href="#" class="a1">新闻中心</a></li>
            <li class="li1"><a href="#" class="a1">人才招聘</a></li>
            <li class="li1"><a href="#" class="a1">会员注册</a></li>
            <li class="li1"><a href="#" class="a1">联系我们</a></li>
        </ul>
    </div>
    <div class="div3"><img class="img2" src="img2\banner.jpg"></div>
    <div class="div4">
       <div class="div5"><h4>产品展示</h4>
        <div class="div11"><img class="img3" src="img2\pro-1.jpg" >
        <p>
           PC008-1 BENZ.with<br>
           diode <br> 
           <span class="span4">长度：93mm</span>
        </p>
        </div>
        <div class="div11"><img class="img3" src="img2\pro-2.jpg" >
            <p>
                PC008-3A<br>
                <span class="span4">长度：101mm</span>
             </p>
        </div>
        <div class="div11"><img class="img3" src="img2\pro-3.jpg" >
            <p>
                PC008-1 BENZ.with<br>
                <span class="span4">长度：93mm</span>
             </p>
        </div>
        <div class="div11"><img class="img3" src="img2\pro-4.jpg" >
            <p>
                PC008-3A<br>
                <span class="span4">长度：101mm</span>
             </p>
        </div>
        
       </div>
       <div class="div6"><h4>新闻中心</h4>
        <div>
            <li class="li2"><a class="a2" href="#"><span class="span1">05-16</span>企业质量诚信经营承诺</a></li>
            <li class="li2"><a class="a2" href="#"><span class="span1">04-08</span>匠心专注，严格抽检中获五星好评</a></li>
            <li class="li2"><a class="a2" href="#"><span class="span1">04-08</span>公司组织员工积极参与运动会</a></li>
            <li class="li2"><a class="a2" href="#"><span class="span1">04-08</span>热烈庆祝我公司顺利通过省高新技术企业认定</a></li>
            <li class="li2"><a class="a2" href="#"><span class="span1">04-08</span>党支部成员补种观景树</a></li>
        </div>
       </div>  
    </div>
    <div class="div7"><h4 class="h4">逼王公司简介</h4>
        <img class="img4"src="img2\gongsi.jpg">
        <p class="p1">逼王<b>查看更多</b></p>
    </div>
    <div class="div8">
        <div class="div9">
            <div class="div10">公司简介</div>
            <div class="div10">产品中心</div>
            <div class="div10">新闻中心</div>
            <div class="div10">会员注册</div>
            <div class="div10">联系我们</div>
        </div>
        <p class="p2">Copyright@ 2019 都达科技股份有限公司 版权所有</p>
    </div>
</body>
</html>